<template>
  <div class="menu-demo" :style="{ padding: '20px' }">
    <a-menu mode="horizontal" :default-selected-keys="['1']" @menu-item-click="onClickMenuItem">
      <a-menu-item key="1">面板管理</a-menu-item>
    </a-menu>
  </div>
  <a-row
    :gutter="20"
    :style="{
      boxSizing: 'border-box',
      width: '100%',
      paddingLeft: '20px',
      
    }"
  >
    <a-col :span="24">
      <a-layout>
      <a-layout>
        <a-layout-content><RouterView/></a-layout-content>
      </a-layout>
    </a-layout>
    </a-col>
  </a-row>
</template>

<script>
import { Modal, Button } from "@arco-design/web-vue";
import { ref } from "vue";
import axios from "axios";
import { onMounted } from "vue";
export default {
  setup() {
    function get_status() {
      axios
        .get("/api/get/port_rules")
        .then((response) => {
          console.log(response.data);
        })
        .catch((error) => {
          console.log(error);
        });
    }
    onMounted(() => {
      get_status();
    });
  },
  methods: {
    onClickMenuItem(key) {
      if (key == "1") {
        this.$router.push("/set/panel");
      }
      //Message.info({ content: `You select ${key}`, showIcon: true });
    },
    //Message.info({ content: `You select ${key}`, showIcon: true });
  },
  components: {
    Modal,
    Button,
  },
};
</script>

<style scoped>
.menu-demo {
  box-sizing: border-box;
  width: 100%;
  padding: 40px;
}
</style>
